<template>
	<view class="home">
		<view class="activebg">
			<ty-swiper-home :list="detail.carousel" height='360' radius='50'></ty-swiper-home>
		</view>
		<view class="bg-ff margin-top-30 bg-shadow radius-40 padding-30">
			<view class="text-32">{{detail.name}}</view>
			<view class="flex align-center justify-between margin-top-5">
				<view class="text-32 text-red"> <text class="text-24">￥</text> {{detail.price}}</view>
				<view class="text-28 text-66">销量：{{detail.sales}}</view>
			</view>
		</view>
		<view class="margin-top-40 text-32 text-bold">码数</view>
		<view class="flex flex-wrap margin-top-25">
			<view class="skubtn flex flex-direction justify-center align-center margin-right-25 margin-bottom-30"
				v-for="(item,index) in detail.spec" :key="index" :class="spec_id==item.id?'border-1a':''"
				@click="spec_id=item.id">
				<view class="text-28">{{item.spec_name}}</view>
				<view class="text-28">{{item.price}}</view>
			</view>
		</view>
		<view class="flex align-center margin-top margin-top-30">
			<view class="text-32 text-bold flex-one">数量（库存）</view>
			<ty-text-stepper :value.sync="number" min="1">
			</ty-text-stepper>
		</view>
		<view class="text-28 text-66 margin-top-40 line-40">
			<ty-text-rich-text :html="detail.description"></ty-text-rich-text>
		</view>
		<view class="memberimg position-relative" v-for="(item,index) in detail.video_url" :key="index">
			<video :src="item" class="memberimg position-relative margin-top-30" danmu-btn controls></video>
			<view class="memberimg position-absolute" style="z-index: 9;top: 0;left: 0;" @click="choseSp(item)">
			</view>
		</view>
		<!-- 视频弹窗 -->
		<view class="" v-if="video_layer_show">
			<ty-layer-videodetail :videourl='video_url' @lvshow="getoff"></ty-layer-videodetail>
		</view>
		<view class="flex align-center justify-between margin-top-100">
			<view class="hjfw" @click="getjoin">加入购物车</view>
			<view class="jsfw" @click="gobuy">立即结算</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				detail: "",
				number: 1,
				video_layer_show: false,
				spec_id: "",
				order_id:""
			}
		},
		onLoad(options) {
			this.id = options.id
			this.order_id = options.orderid
		},
		onReady() {
			this.rq.getData('products/products_info', {
				id: this.id
			}).then(res => {
				if (res.code == 1) {
					this.detail = res.data
				}
			})
		},
		methods: {
			choseSp(i) {
				this.video_url = i
				this.video_layer_show = true
			},
			getoff() {
				this.video_layer_show = false
			},
			getjoin() {
				this.rq.getData('products/add_cart', {
					product_id: this.id,
					num: this.number,
					spec_id: this.spec_id,
					occupants_id:this.order_id
				}).then(res => {
					if (res.code == 1) {
						this.cn.toast('加入成功')
					}
				})
			},
			gobuy() {
				uni.navigateTo({
					url: '/pages/board/bookorder?id=' + this.order_id + '&name=' + this.detail.name + '&num=' + this
						.number + '&spec_id=' + this.spec_id + '&image=' + this.detail.carousel[0].image +'&proudid='+this.detail.id+'&price='+this.detail.price
				})
			}
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx 100rpx;
	}

	.skubtn {
		min-width: 164rpx;
		height: 108rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0 20rpx;
		/* border: 2rpx solid #000000; */
	}

	.border-1a {
		border: 2rpx solid #000000
	}

	.memberimg {
		width: 100%;
		height: 360rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.hjfw {
		width: 326rpx;
		height: 88rpx;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		border: 2rpx solid #999999;
		font-size: 32rpx;
		color: #101010;
		line-height: 88rpx;
		text-align: center;
	}

	.jsfw {
		width: 326rpx;
		height: 88rpx;
		background: #101010;
		border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
		font-size: 32rpx;
		color: #fff;
		line-height: 88rpx;
		text-align: center;
	}
</style>